<template>
  <div class="article-card-wrapper">
    <div class="article-content">
      <div class="pub-info" >
        <em>
          {{article.author_name}}
        </em> <span style="color: var(--gray)">|</span> 
        {{formatDate}}
      </div>
      <h3 class="article-title">
        {{article.title}}
      </h3>
      <h3 class="article-abstract">
        {{article.digest}}
      </h3>
    </div>
    <img :src="$baseURL + article.cover" alt="cover" class="cover"
    v-if="article.cover">
  </div>
</template>

<script>
export default {
  props: {
    article: Object
  },
  data() {
    return {
    }
  },
  computed: {
    formatDate() {
      return this.article.publish_date ? new Date(this.article.publish_date).toLocaleString()
        : new Date().toLocaleString();
    }
  },
  methods: {
  },
}
</script>

<style scoped lang="less">
@w: var(--articleCardWidth);
@h: var(--articleCardHeight);

.article-card-wrapper {
  box-sizing: border-box;
  width: @w;
  height: @h;
  height: @h;
  padding: calc(@h * 0.1) calc(@w * 0.04);
  text-align: left;

  .article-content {
    float: left;
    width: calc(@w * 0.65);
  }

  .pub-info {
    font-size: calc(@h * 0.06);
    line-height: 2;
  }

  .article-title {
    font-size: calc(@h * 0.14);
    font-weight: bold;
    color: var(--dark);
    line-height: 1.5;
    margin-bottom: calc(@h * 0.05);
    pointer-events: none;
  }

  .article-abstract {
    font-size: calc(@h * 0.09);
    color: var(--darkGray);
    line-height: 1.5;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    pointer-events: none;
  }

  .datas {
    margin-top: calc(@h * 0.04);

    display: flex;
    justify-content: left;
    align-items: center;

    li{
      i, span {
        font-size: calc(@h * 0.02);
      }

      span {
        margin-left: calc(@h * 0.04);
      }

      &:not(:first-child) {
        margin-left: calc(@w * 0.05);
      }
    }
  }

  .cover {
    float: right;
    height: calc(@h * 0.8);
    width: calc(@w * 0.22);
    opacity: .8;
  }
}
</style>
